<template>
	<el-container>
		<el-aside>
			<el-container>
				<el-header style="background: linear-gradient(to right, #53a7ff, #53a7ff);">
					<div style="width: 100%;text-align: center;font-weight: 600;font-size: 20px;color: white;">
						<countDown
							format="hh 小时 mm 分钟 ss 秒"
							:time="countDown"
							@end="countDownEnd"
						/>
					</div>
				</el-header>
				<el-main></el-main>
			</el-container>
		</el-aside>
		<el-container>
			<el-header>
				<div style="width: 100%;text-align: center;font-weight: 600;font-size: 20px;">
					{{this.examTest.title}}
				</div>
			</el-header>
			<el-main style="overflow-x:hidden">

				<div v-for="(qList,index) in questionsList" :key="index">
					<span style="font-size: 16px;font-weight: 600">{{ index + 1 }}、{{ qList.title }}</span><span style="margin-left: 20px;color: red">{{ qList.grade }}</span>/分
					<div v-if="qList.examType=='2'">
						<el-input v-model="form[qList.recordId]" type="textarea" placeholder="简述" style="margin-top: 10px"></el-input>
					</div>
					<div v-else>
						<div v-for="(item,i) in qList.questionsList" :key="i" style="width: 100%;margin-left: 40px;font-size: 14px;margin-bottom: 5px">
							<el-radio v-model="form[qList.recordId]" v-if="qList.examType=='0'" :label="item.optValue">{{ item.optValue }}、{{ item.childTitle }}</el-radio>
							<el-checkbox-group v-model="form[qList.recordId]" v-if="qList.examType=='1'">
								<el-checkbox :label="item.optValue">{{ item.optValue }}、{{ item.childTitle }}</el-checkbox>
							</el-checkbox-group>
						</div>
					</div>
				</div>


			</el-main>
			<el-footer style="text-align: right;">
				<div style="float: left;font-size: 20px;font-weight: 600">得分:{{grade}}分</div>
				<el-button  type="primary" :loading="isSaveing" @click="submit()">交 卷</el-button>
			</el-footer>
		</el-container>
		<el-aside>
			<el-container>
				<el-header style="background: linear-gradient(to right, #53a7ff, #53a7ff);">
					<div style="width: 100%;text-align: center;font-weight: 600;font-size: 20px;color: white;">
						合格:<span style="color:orangered;">{{this.examTest.passMark}}</span>分
					</div>
				</el-header>
				<el-main></el-main>
			</el-container>
		</el-aside>
	</el-container>
</template>

<script>
import countDown from './time'
export default {
	name: 'layoutLCR',
	components: {
		countDown,
	},
	data() {
		return {
			isSaveing:false,
			recordId: this.$route.query.recordId,
			countDown: 0, // 倒计时
			examTest:{},
			grade:"??",
			questionsList:[],
			form:{},
		}
	},
	mounted() {
		this.getExamTestById();
	},
	methods: {
		async submit(){
			await this.$confirm(`您确定要提前交卷吗？`, '提示', {
				type: 'warning'
			}).then(async() => {
				let param={
					examTestId:this.recordId,
					result:JSON.stringify(this.form)
				}
				let res = await this.$API.office.exam.addExamGrade.post(param);
				if(res.code==200)
				{
					this.grade = res.data;
					this.$message.success("操作成功")
				}else {
					this.$alert("不能重复参考", "提示", {type: 'error'})
				}
			}).catch(() => {

			})
		},
		async getExamTestById()
		{
			var res = await this.$API.office.exam.getExamTestById.get({recordId:this.recordId});
			if(res.code==200)
			{
				this.examTest = res.data;
				this.getExamQuestionListById();
				setTimeout(() => {
					this.countDown = this.examTest.duration*60;
				}, 1000);
			}else
			{
				this.$alert("不能重复参考", "提示", {type: 'error'})
			}
		},
		async getExamQuestionListById()
		{
			var res = await this.$API.office.exam.getExamQuestionListById.get({recordId:this.recordId});
			if(res.code==200)
			{
				this.questionsList = res.data;
			}
		},
		// 倒计时结束
		async countDownEnd() {
			let param={
				examTestId:this.recordId,
				result:JSON.stringify(this.form)
			}
			let res = await this.$API.office.exam.addExamGrade.post(param);
			if(res.code==200)
			{
				this.grade = res.data;
			}else {
				this.$alert("不能重复参考", "提示", {type: 'error'})
			}
			this.$message.success("考试时间已到,系统已自动交卷！")
		},
	},
}
</script>

<style>
</style>
